<!doctype html>
<html lang="zh-CN">

<head>
    <title>注册</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/el/index.css">
    <link rel="stylesheet" href="./css/regiset1.css">
</head>

<body>
    <div id='app' class='dis-cen' v-loading='loading'>
        <div class='dis-spa login-wrap'>
            <div>
                <img src="./img/login-bg2.png" width="100%" height="100%">
            </div>
            <div class='login-input'>
                <div>
                    <img class='logo-img' src="./img/login-bg3.png" height="50px">
                    <input type="text" placeholder="请输入手机号" v-model='mobile'>
                    <div class='invi-code'>
                        <input class='put' type="text" placeholder="请输入验证码" v-model='code'>
                        <a @click='getCode' class='hover' v-text='codeFont'>获取验证码</a>
                    </div>
                    <a class='hover login-btn' @click='next'>下一步</a>
                    <p class='forget'>
                        <a href="./login.html">去登陆</a>
                    </p>
                </div>

            </div>
        </div>
    </div>

    <script src="./js/jquery.min.js"></script>
    <script src="./js/jquery.cookie.js"></script>
    <script src='./js/com.js'></script>
    <script src="./js/vue.min.js"></script>
    <script src="./js/el/index.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                loading: false,
                mobile: '',
                code: '',
                //60s再访问的字
                codeFont: '获取验证码'
            },
            methods: {
                //获取验证码
                getCode: function() {
                    if (this.codeFont != '获取验证码') {
                        return;
                    }
                    if (!this.mobile) {
                        this.$message.error('请输入正确的手机号');
                        return;
                    }
                    var This = this;
                    this.loading = true;
                    AJAX({
                        url: SEND_CODE,
                        app: this,
                        data: {
                            mobile: this.mobile,
                        },
                        success: function(data) {
                            This.loading = false;
                            if (data.Status == '0') {
                                var num = 60;
                                var time = setInterval(function() {
                                    if (num <= 0) {
                                        clearInterval(time);
                                        This.codeFont = '获取验证码';
                                        return;
                                    }
                                    This.codeFont = (num--) + 's';
                                }, 1000);
                                This.$message.error('发送短信成功，请输入收到的短信验证码！');
                            } else {
                                This.$message.error('发送短信失败，请稍后再试！');
                            }
                        }
                    });
                },
                //校验验证码
                next: function() {
                    if (!this.mobile) {
                        this.$message.error('请输入正确的手机号');
                        return;
                    }
                    if (!this.code) {
                        this.$message.error('请输入验证码');
                        return;
                    }
                    var This = this;
                    this.loading = true;
                    AJAX({
                        url: CHECK_CODE,
                        app: this,
                        data: {
                            mobile: this.mobile,
                            code: this.code
                        },
                        success: function(data) {
                            This.loading = false;
                            if (data.Status == '0') {
                                _openHref({
                                    url: './regiset2.html',
                                    data: {
                                        key: data.Data
                                    }
                                });
                            } else {
                                This.$message.error('验证码输入不正确');
                            }
                        }
                    });
                }
            }
        });
    </script>

</body>

</html>